<template>
  <div>
    <h1>Vue3配合Vite的TodoList</h1>
    <input placeholder="请输入代办事项" v-model="text" @keyup.enter="addOne" />
    <button @click="addOne">提交</button>
    <p v-for="(list, i) in todoList" :key="i">
      <span>{{ list.text }}</span>
      <button @click.prevent="deleteOne(list.text)">删除</button>
    </p>
  </div>
</template>

<script>
import { ref, reactive, onMounted, computed } from "vue";
export default {
  setup() {
    const text = ref("");
    const todo = reactive({
      list: [{ text: "2112" }, { text: "22332" }],
    });

    const todoList = computed(() => todo.list);

    const addOne = () => {
      if (text.value === "") {
        alert("请输入内容");
        return;
      }
      const content = { text: text.value };
      todo.list.push(content);
      text.value = "";
      console.log(todo.list);
    };
    const deleteOne = (listText) => {
      console.log("删除" + listText);
      todo.list = todo.list.filter((list) => list.text !== listText);
      console.log(todo.list);
    };

    onMounted(() => {
      console.log("这是一个todoList");
    });
    return {
      text,
      todoList,
      addOne,
      deleteOne,
    };
  },
};
</script>

<style scoped>
h1 {
  color: #4fc08d;
}

h1,
p {
  font-family: Arial, Helvetica, sans-serif;
}
</style>

